* {
  box-sizing: border-box;
}

.pf_scroller {
  position: relative;
  overflow: auto;
}

.pf-dialogs {
  position: relative;
  z-index: 1000;
  .backdrop {
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    left: 0;
    background: linear-gradient(
      rgba(205, 216, 233, 0.6274509804),
      var(--gray-opacity-35) 46%,
      transparent 92%
    );
  }
  .pf_scroller {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
  }
  .dialog-wrapper {
    position: absolute;
    min-height: 100vh;
    right: 0;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    .dialog {
      padding: 1.25em;
      width: 260px;
      color: var(--text-color-2);
      --background-color: var(--primary-opacity-3);
      --color: var(--primary-gray);
      background-color: #c8ebff99;
      background-image: linear-gradient(
          rgba(255, 255, 255, 0.65) 14px,
          rgba(255, 255, 255, 0.8)
        ),
        radial-gradient(at center left, var(--background-color), transparent);
      border-radius: 0.75em;
      box-shadow: 0 0 0 1px var(--white-default) inset,
        0 0 1px var(--gray-opacity-2), 0 1em 1.5em var(--gray-opacity-3);
      -webkit-backdrop-filter: blur(5px) brightness(80%) saturate(200%);
      backdrop-filter: blur(5px) brightness(80%) saturate(200%);
      position: relative;
      text-align: center;
      text-shadow: 0 1px var(--white-opacity-9);
      margin: 1em 1em 6em;
      .dialog-icon {
        width: 64px;
        height: 64px;
        border-radius: 9em;
        background: rgba(255, 255, 255, 0.9)
          linear-gradient(transparent, var(--background-color));
        box-shadow: 0 5px 8px var(--background-color), 0 0 0 1px #ffffff80 inset;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        margin: 0 auto 15px;
        color: var(--color);
      }
      .dialog-title {
        color: var(--color);
        font-size: 20px;
        text-shadow: -1px -1px #fff, 2px 2px 2px var(--background-color);
        margin: 0.75em 0 0.5em;
      }
      .dialog-content {
        margin: 0.5em 0;
        .input {
          font-family: inherit;
          color: var(--text-color-2);
          resize: none;
          margin: 0.5em 0 0;
          width: 100%;
          padding: 9px 12px;
          border: none;
          box-shadow: 0 0 0 1px var(--gray-opacity-15);
          background: var(--white-opacity-7);
          border-radius: 0.45em;
          font-size: 14px;
          transition: 0.25s;
        }
      }
      .dialog-footer {
        display: grid;
        grid-row-gap: 0.25em;
        margin-top: 1.5em;
        button.confirm {
          box-shadow: 0 8px 8px var(--white-opacity-3) inset,
            1px 1px 1px var(--white-opacity-9) inset,
            1px 1px 1px var(--white-opacity-7);
          color: var(--color);
          text-shadow: -1px -1px #fff, 2px 2px 2px var(--background-color);
        }
        button {
          border: 1px solid var(--gray-opacity-1);
          font-size: 16px;
          padding: 8px 15px;
          border-radius: 0.5em;
          cursor: pointer;
          background: transparent;
          transition: 0.25s;
        }
        button:hover {
          box-shadow: 0 16px 16px var(--white-opacity-5) inset,
            1px 1px 1px var(--white-opacity-9) inset,
            1px 1px 1px var(--white-opacity-7);
          transition: 0s;
        }
        button:active {
          background: transparent;
          box-shadow: 4px 4px 8px var(--gray-opacity-1) inset,
            1px 1px 1px var(--white-opacity-0) inset,
            1px 1px 1px var(--white-opacity-7);
          transition: 0s;
        }
      }
    }
    .dialog:before {
      content: "";
      position: absolute;
      left: 0.5em;
      right: 0.5em;
      top: 0;
      height: 14px;
      background-image: linear-gradient(#fff, rgba(255, 255, 255, 0.3));
      border-radius: 9em;
    }
  }
}

html {
  --primary-color: #1f8bff;
  --primary-opacity-0: rgba(31, 139, 255, 0);
  --primary-opacity-05: rgba(31, 139, 255, 0.05);
  --primary-opacity-1: rgba(31, 139, 255, 0.1);
  --primary-opacity-15: rgba(31, 139, 255, 0.15);
  --primary-opacity-2: rgba(31, 139, 255, 0.2);
  --primary-opacity-25: rgba(31, 139, 255, 0.25);
  --primary-opacity-3: rgba(31, 139, 255, 0.3);
  --primary-opacity-35: rgba(31, 139, 255, 0.35);
  --primary-opacity-4: rgba(31, 139, 255, 0.4);
  --primary-opacity-45: rgba(31, 139, 255, 0.45);
  --primary-opacity-5: rgba(31, 139, 255, 0.5);
  --primary-opacity-55: rgba(31, 139, 255, 0.55);
  --primary-opacity-6: rgba(31, 139, 255, 0.6);
  --primary-opacity-65: rgba(31, 139, 255, 0.65);
  --primary-opacity-7: rgba(31, 139, 255, 0.7);
  --primary-opacity-75: rgba(31, 139, 255, 0.75);
  --primary-opacity-8: rgba(31, 139, 255, 0.8);
  --primary-opacity-85: rgba(31, 139, 255, 0.85);
  --primary-opacity-9: rgba(31, 139, 255, 0.9);
  --primary-opacity-95: rgba(31, 139, 255, 0.95);
  --primary-gray: #5578a1;
  --primary-gray-opacity-0: rgba(85, 120, 161, 0);
  --primary-gray-opacity-05: rgba(85, 120, 161, 0.05);
  --primary-gray-opacity-1: rgba(85, 120, 161, 0.1);
  --primary-gray-opacity-15: rgba(85, 120, 161, 0.15);
  --primary-gray-opacity-2: rgba(85, 120, 161, 0.2);
  --primary-gray-opacity-25: rgba(85, 120, 161, 0.25);
  --primary-gray-opacity-3: rgba(85, 120, 161, 0.3);
  --primary-gray-opacity-35: rgba(85, 120, 161, 0.35);
  --primary-gray-opacity-4: rgba(85, 120, 161, 0.4);
  --primary-gray-opacity-45: rgba(85, 120, 161, 0.45);
  --primary-gray-opacity-5: rgba(85, 120, 161, 0.5);
  --primary-gray-opacity-55: rgba(85, 120, 161, 0.55);
  --primary-gray-opacity-6: rgba(85, 120, 161, 0.6);
  --primary-gray-opacity-65: rgba(85, 120, 161, 0.65);
  --primary-gray-opacity-7: rgba(85, 120, 161, 0.7);
  --primary-gray-opacity-75: rgba(85, 120, 161, 0.75);
  --primary-gray-opacity-8: rgba(85, 120, 161, 0.8);
  --primary-gray-opacity-85: rgba(85, 120, 161, 0.85);
  --primary-gray-opacity-9: rgba(85, 120, 161, 0.9);
  --primary-gray-opacity-95: rgba(85, 120, 161, 0.95);
  --primary-dark: #32465e;
  --analogous-color: #33bbff;
  --analogous-opacity-1: rgba(51, 187, 255, 0.1);
  --analogous-opacity-2: rgba(51, 187, 255, 0.2);
  --analogous-opacity-3: rgba(51, 187, 255, 0.3);
  --analogous-opacity-4: rgba(51, 187, 255, 0.4);
  --analogous-opacity-5: rgba(51, 187, 255, 0.5);
  --analogous-opacity-6: rgba(51, 187, 255, 0.6);
  --analogous-opacity-7: rgba(51, 187, 255, 0.7);
  --analogous-opacity-8: rgba(51, 187, 255, 0.8);
  --analogous-opacity-9: rgba(51, 187, 255, 0.9);
  --white-default: #fff;
  --white-opacity-0: rgba(255, 255, 255, 0);
  --white-opacity-05: rgba(255, 255, 255, 0.05);
  --white-opacity-1: rgba(255, 255, 255, 0.1);
  --white-opacity-15: rgba(255, 255, 255, 0.15);
  --white-opacity-2: rgba(255, 255, 255, 0.2);
  --white-opacity-25: rgba(255, 255, 255, 0.25);
  --white-opacity-3: rgba(255, 255, 255, 0.3);
  --white-opacity-35: rgba(255, 255, 255, 0.35);
  --white-opacity-4: rgba(255, 255, 255, 0.4);
  --white-opacity-45: rgba(255, 255, 255, 0.45);
  --white-opacity-5: rgba(255, 255, 255, 0.5);
  --white-opacity-55: rgba(255, 255, 255, 0.55);
  --white-opacity-6: rgba(255, 255, 255, 0.6);
  --white-opacity-65: rgba(255, 255, 255, 0.65);
  --white-opacity-7: rgba(255, 255, 255, 0.7);
  --white-opacity-75: rgba(255, 255, 255, 0.75);
  --white-opacity-8: rgba(255, 255, 255, 0.8);
  --white-opacity-85: rgba(255, 255, 255, 0.85);
  --white-opacity-9: rgba(255, 255, 255, 0.9);
  --white-opacity-95: rgba(255, 255, 255, 0.95);
  --success-color: #67c23a;
  --success-opacity-1: rgba(103, 194, 58, 0.1);
  --success-opacity-2: rgba(103, 194, 58, 0.2);
  --success-opacity-3: rgba(103, 194, 58, 0.3);
  --success-opacity-4: rgba(103, 194, 58, 0.4);
  --success-opacity-5: rgba(103, 194, 58, 0.5);
  --success-opacity-6: rgba(103, 194, 58, 0.6);
  --success-opacity-7: rgba(103, 194, 58, 0.7);
  --success-opacity-8: rgba(103, 194, 58, 0.8);
  --success-opacity-9: rgba(103, 194, 58, 0.9);
  --warning-color: #e6a23c;
  --warning-opacity-1: rgba(230, 162, 60, 0.1);
  --warning-opacity-2: rgba(230, 162, 60, 0.2);
  --warning-opacity-3: rgba(230, 162, 60, 0.3);
  --warning-opacity-4: rgba(230, 162, 60, 0.4);
  --warning-opacity-5: rgba(230, 162, 60, 0.5);
  --warning-opacity-6: rgba(230, 162, 60, 0.6);
  --warning-opacity-7: rgba(230, 162, 60, 0.7);
  --warning-opacity-8: rgba(230, 162, 60, 0.8);
  --warning-opacity-9: rgba(230, 162, 60, 0.9);
  --error-color: #f56c6c;
  --error-opacity-1: rgba(245, 108, 108, 0.1);
  --error-opacity-2: rgba(245, 108, 108, 0.2);
  --error-opacity-3: rgba(245, 108, 108, 0.3);
  --error-opacity-4: rgba(245, 108, 108, 0.4);
  --error-opacity-5: rgba(245, 108, 108, 0.5);
  --error-opacity-6: rgba(245, 108, 108, 0.6);
  --error-opacity-7: rgba(245, 108, 108, 0.7);
  --error-opacity-8: rgba(245, 108, 108, 0.8);
  --error-opacity-9: rgba(245, 108, 108, 0.9);
  --gray-0: #001e3c;
  --gray-opacity-0: rgba(0, 30, 60, 0);
  --gray-opacity-05: rgba(0, 30, 60, 0.05);
  --gray-opacity-1: rgba(0, 30, 60, 0.1);
  --gray-opacity-15: rgba(0, 30, 60, 0.15);
  --gray-opacity-2: rgba(0, 30, 60, 0.2);
  --gray-opacity-25: rgba(0, 30, 60, 0.25);
  --gray-opacity-3: rgba(0, 30, 60, 0.3);
  --gray-opacity-35: rgba(0, 30, 60, 0.35);
  --gray-opacity-4: rgba(0, 30, 60, 0.4);
  --gray-opacity-45: rgba(0, 30, 60, 0.45);
  --gray-opacity-5: rgba(0, 30, 60, 0.5);
  --gray-opacity-55: rgba(0, 30, 60, 0.55);
  --gray-opacity-6: rgba(0, 30, 60, 0.6);
  --gray-opacity-65: rgba(0, 30, 60, 0.65);
  --gray-opacity-7: rgba(0, 30, 60, 0.7);
  --gray-opacity-75: rgba(0, 30, 60, 0.75);
  --gray-opacity-8: rgba(0, 30, 60, 0.8);
  --gray-opacity-85: rgba(0, 30, 60, 0.85);
  --gray-opacity-9: rgba(0, 30, 60, 0.9);
  --gray-opacity-95: rgba(0, 30, 60, 0.95);
  --gray-1: #324057;
  --gray-2: #475669;
  --gray-3: #8492a6;
  --gray-4: #99a9bf;
  --gray-5: #c0ccda;
  --gray-6: #d3dce6;
  --gray-7: #e5e9f2;
  --gray-8: #eff2f7;
  --gray-9: #f2f7fc;
  --text-color: #324057;
  --text-color-2: #475669;
  --text-color-3: #758397;
  --text-color-4: #8492a6;
  --border-color-0: #cad4e0;
  --border-color: #d3dce6;
  --border-color-2: #e5e9f2;
  --border-color-3: #eff2f7;
  --bg-color: #e8f0fa;
  --text-shadow: rgba(255, 255, 255, 0.6);
}
